<template>
  <div class="item" style="height: 100%; width: 100%" ref="container">
    <div id="AlarmType" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data(){
    return{
      echart: echarts,
      option:{}
    }
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods:{
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("AlarmType"));
    },
    async getData() {
      await this.updateData();
    },
    updateData(){
      this.option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '漏电故障' },
              { value: 735, name: '过温预警' },
              { value: 580, name: '过温分闸' },
              { value: 484, name: '短路分闸' },
              { value: 300, name: '短路预判' },
              { value: 300, name: '过压分闸' },
              { value: 300, name: '过流分闸' },
              { value: 300, name: '欠压分闸' },
            ]
          }
        ]
      };
      this.chartInstance.setOption(this.option, true);
    },
  }
}
</script>



<style scoped>

</style>
